<template>
  <view class="block-view" v-if="time !== false && seckillGoodsList && seckillGoodsList.length">
    <view class="block-header">
      <view class="block-title u-flex">
        <view class="seckill-title">
          限时抢购
        </view>
        <view class="seckill-times">
          <text class="seckill-nth">{{timeLine.distance_time == 0 ? (onlyOne ? '距结束' : '距下轮开始') : '距开始'}}</text>
          <text class="seckill-time">{{ times.hours }}:{{ times.minutes }}:{{ times.seconds }}</text>
        </view>
      </view>
      <navigator url="/promotion-module/seckill/seckill" hover-class="none" class="more-text">
        更多商品
        <u-icon class="u-margin-left-8" name="arrow-right" color="#333" size="27"></u-icon>
      </navigator>
    </view>
    <view class="goods-list-view">
      <scroll-view scroll-x style="white-space:nowrap;">
        <navigator :url="'/goods-module/goods?goods_id=' + goods.goods_id" hover-class="none" class="goods-item" v-for="(goods, index) in seckillGoodsList" :key="index">
          <view class="goods-img">
            <image class="img" :src="goods.goods_image"></image>
          </view>
          <custom-price :price="goods.seckill_price" :size="30" :fontWeight="600"></custom-price>
          <view class="original-price">
            <text>￥{{ goods.original_price }}</text>
          </view>
        </navigator>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import * as API_Promotions from '@/api/promotions.js'
import { Foundation } from '@/ui-utils/index.js'

export default {
  name: 'home-seckill',
  data() {
    return {
      time: false, //时间
      // 时间
      times: {
        hours: '00',
        minutes: '00',
        seconds: '00'
      },
      timeLine: '', //当前这一场的时刻信息
      onlyOne: false, //是否只有一场
      seckillGoodsList: [], //限时抢购商品列表
    }
  },
  mounted() {
    this.getTimeline()
  },
  methods: {
    //获取时间段
    getTimeline(){
      API_Promotions.getSeckillTimeLine().then(response => {
        const data = response
        if(!data || !data.length) return
        const res = data.sort((x,y)=>(Number(x.time_text) - Number(y.time_text)))
        const onlyOne = res.length === 1
        this.onlyOne = onlyOne
        this.time = res[0].distance_time != 0 ? res[0].distance_time : onlyOne ? Foundation.theNextDayTime() : res[1].distance_time
        this.timeLine = res[0]
        this.startCountDown()
        this.getSeckillTimeGoods(res[0].time_text)
      })
    },
    //开始倒计时
    startCountDown(){
      this.interval = setInterval(()=>{
        let { time } = this
        if(time <= 0){
          clearInterval(this.interval)
          if(this.onlyOne){
            uni.showModal({
              title: '提示',
              showCancel: false,
              confirmColor: "#ff5000",
              content: '本轮限时抢购已结束！',
              success(res){
                uni.reLaunch({ url: '/pages/tabs/home/home' })
              }
            })
          }else{
            uni.showModal({
              title: '提示',
              showCancel: false,
              confirmColor: "#ff5000",
              content: '下一轮限时抢购已经开始啦！请确认查看',
              success(res){
                uni.reLaunch({ url: '/pages/tabs/home/home' })
              }
            })
          }
          return false
        }
        this.time -= 1
        this.times = Foundation.countTimeDown(time)
      },1000)
    },
    //获取时间段商品
    getSeckillTimeGoods(range_time){
      API_Promotions.getSeckillTimeGoods({ range_time }).then(response => {
        const { data } = response
        this.seckillGoodsList = data
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.block-view {
  background-color: #fff;
  margin: 10rpx 20rpx 20rpx 20rpx;
  border-radius: 10rpx;
  padding: 10rpx 15rpx;
  .block-header {
    font-size: 31rpx;
    padding: 20rpx 0rpx;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    .seckill-title {
      font-weight: 600;
      font-size: 34rpx;
    }
    .seckill-times {
      margin: 0 20rpx;
      font-size: 22rpx;
      .seckill-nth {
        color: #fff;
        padding: 4rpx 10rpx;
        border-top-left-radius: 30rpx;
        border-bottom-left-radius: 30rpx;
        background-color: #ff5000;
        border: 2rpx solid #ff5000;
      }
      .seckill-time {
        color: #ff5000;
        font-weight: 600;
        padding: 4rpx 10rpx;
        border-top-right-radius: 30rpx;
        border-bottom-right-radius: 30rpx;
        border: 2rpx solid #ff5000;
      }
    }
    .more-text {
      color: #909399;
      font-size: 25rpx;
    }
  }
  .goods-list-view {
    .goods-item {
      width: 20%;
      display: inline-block;
      background: #fff;
      margin: 8rpx;
      border-radius: 10rpx;
      text-align: center;
      .goods-img {
        width: 120rpx;
        height: 120rpx;
        .img {
          width: 100%;
          height: 100%;
        }
      }
      .original-price {
        color: #ABABAB;
        font-size: 22rpx;
        line-height: 24rpx;
        margin-bottom: 15rpx;
        padding: 0 4rpx;
        text-decoration: line-through;
      }
    }
  }
}
</style>
